<template>
  <el-dialog :title="title" :close-on-click-modal="true" width="1100px" :visible.sync="visible">
    <div id="selectDay">
      <el-date-picker
        style="top:20px"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dateChange"
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div id="path-map"></div>
  </el-dialog>
</template>

<script>
import { formatDate } from '@/utils/timeUtils.js'

export default {
  props: {
    containerList: {
      type: Array,
      default: () => []
    },
    carList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default:""
    }
  },
  data() {
    
    const pre = formatDate(new Date(),'yyyy-MM-dd')+" 00:00:00"
    const now = formatDate(new Date(),'yyyy-MM-dd')+" 24:00:00"
    
    return {
      date: [pre, now],
      visible: false,
      map: null,
      marker: null,
      satellite: new AMap.TileLayer.Satellite(),
      roadNet: new AMap.TileLayer.RoadNet(),
      defaultLayer: AMap.createDefaultLayer(),
      carImg0: require("@/assets/img/map/car0.png"),
      carImg1: require("@/assets/img/map/car1.png"),
      carImg2: require("@/assets/img/map/car2.png"),
      carImg3: require("@/assets/img/map/car3.png"),
      carId: ""
    }
  },
  methods: {
    init(carId) {
      this.carId = carId;
      this.visible = true
      this.$nextTick(_ => {
        this.map = new AMap.Map('path-map', {
          rotateEnable: false,
          showBuildingBlock: true,
          center: [120.145407, 35.927715],
          zoom: 10,
          // layers: [
          //   this.defaultLayer
          // ]
        })
        this.map.on('complete', () => {
          this.getCarDriverInfo()
        })
      })
    },
    handleClose() {
      console.log(this.map)
      // this.map.clearMap()
    },
    dateChange(res) {
      console.log(res)
      this.map.clearMap()
      this.getCarDriverInfo()

    },
    getCarDriverInfo() {
      var startDate = this.date[0];
      var endDate = this.date[1];
      this.$http({
        url: this.$http.adornUrl(
          `/sign/signcarlonlat/getListByCarIdAndDate?carId=${this.carId}&startDate=${startDate}&endDate=${endDate}`
        ),
        method: 'post',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var list = data.list;
          if (list.length > 0) {
            var lineArr = [];
            for (var i = 0; i < list.length; i++) {
              var locationObj = list[i];
              var tempArr = [];
              tempArr.push(locationObj.lon)
              tempArr.push(locationObj.lat)
              lineArr.push(tempArr);
            }

            // const lineArr = JSON.parse('[' + this.task.path + ']')
            if (this.marker) {
              this.map.remove(this.marker)
              this.marker = null
            }

            this.marker = new AMap.Marker({
              map: this.map,
              position: lineArr[0],
              icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
              offset: new AMap.Pixel(-13, -26),
            })

            // 绘制轨迹
            const polyline = new AMap.Polyline({
              map: this.map,
              path: lineArr,
              showDir: true,
              strokeColor: "#28F",  //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6,      //线宽
              // strokeStyle: "solid"  //线样式
            });

            const passedPolyline = new AMap.Polyline({
              map: this.map,
              strokeColor: "#AF5",  //线颜色
              strokeWeight: 6,      //线宽
            })

            this.marker.on('moving', e => {
              passedPolyline.setPath(e.passedPath);
              // this.map.setCenter(e.target.getPosition(), true)
            })

            this.map.setFitView()

            setTimeout(() => {
              this.marker.moveAlong(lineArr, {
                // 每一段的时长，可根据实际采集时间间隔设置
                duration: 100,
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true
              })
            }, 500)
          } else {
            this.$message.warning('未查询到轨迹')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#path-map {
  width: 100%;
  height: 520px;
  background-color: #f5f5f5;
}

#selectDay {
  position: absolute;
  left: 40px;
  top: 50px;
  z-index: 9999;
}
</style>
